(1)表单之阻止表单提交
Html
</form>
Javascript可以阻止我们表单提交等等。
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}，
getCharCode: function (event) {
if (typeof event.charCode == "number") {
return event.charCode;
} else {
return event.keyCode;
}
}
};
var myform=document.getElementById("myform");
EventUtil.addHandler(myform,"submit",function(event){
event=EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
})
(2)阻止表单进行重置
Html
当点击reset按钮时我们可以用代码来阻止重置。
JavaScript
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
(3)一些属性
Html
<form id="myform">
<input />
<input name="nihao"/>
</form>
JavaScript
var form = document.getElementById("myform");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"nihao"的字段
var field2 = form.elements["nihao"];
field2.value="nihao";
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
alert(fieldCount);
我们以此给了btn加了三个事件。只用了一个函数。
(4)避免重复提交
能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。例如，很
多用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。
为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件
发生时禁用提交按钮即可。以下就是这样一个例子。
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});
以上代码为表单的 submit 事件添加了一个事件处理程序。事件触发后，代码取得了提交按钮
并将其 disabled 属性设置为 true。注意，不能通过 onclick 事件处理程序来实现这个功能，原
因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的 submit 事件之前触发 click 事件，
而有的浏览器则相反。对于先触发 click 事件的浏览器，意味着会在提交发生之前禁用按钮，结果
永远都不会提交表单。因此，最好是通过 submit 事件来禁用提交按钮。不过，这种方式不适合表
单中不包含提交按钮的情况；如前所述，只有在包含提交按钮的情况下，才有可能触发表单的 submit
事件。
(4)文档加载时自动获得焦点
EventUtil.addHandler(window,"load",function(event){
document.forms[0].elements[0].focus();
})
(5)针对某个控件过滤所有按钮输入
EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});
(6)针对某个控件只过滤特定字符
如下只能输入数字
var textbox = document.getElementById("textboxs");
EventUtil.addHandler(textbox, "keypress", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))) {
EventUtil.preventDefault(event);
}
});
(7)针对某一个控件输入完毕后自动切换焦点到下一个控件
Html
<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">
JavaScript
(function () {
function tabForward(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.value.length == target.maxLength) {
var form = target.form;
for (var i = 0, len = form.elements.length; i < len; i++) {
if (form.elements[i] == target) {
if (form.elements[i + 1]) {
form.elements[i + 1].focus();
}
return;
}
}
}
}
/*以上为处理焦点切换的函数*/
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
//获取textbox
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
/*给textbox添加事件*/
})();
(8)h5一些属性
*第一种情况是在表单字段中指定了 required 属性，如下面的例子所示：
<input type="text" name="username" required>
<input type="email" name ="email">
<input type="url" name="homepage">
(9)给选择框加选项
可以使用 JavaScript 动态创建选项，并将它们添加到选择框中。添加选项的方式有很多，第一种方
式就是使用如下所示的 DOM 方法。
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);
(10)小结
虽然 HTML 和 Web 应用自诞生以来已经发生了天翻地覆的变化，但 Web 表单相对却没有什么改
变。使用 JavaScript 可以增强已有的表单字段，从而创造出新的功能，或者提升表单的易用性。为此，
表单、表单字段都引入了相应的属性和方法，以便 JavaScript 使用。下面是本章介绍的几个概念。
1 可以使用一些标准或非标准的方法选择文本框中的全部或部分文本。
2 大多数浏览器都采用了 Firefox 操作选择文本的方式，但 IE 仍然坚持自己的实现。
3 在文本框的内容变化时，可以通过侦听键盘事件以及检测插入的字符，来允许或禁止用户输入
某些字符。
除 Opera 之外的所有浏览器都支持剪贴板事件，包括 copy、cut 和 paste。其他浏览器在实现剪
贴板事件时也可以分为几种不同的情况。
4IE、Firefox、Chrome 和 Safari 允许通过 JavaScript 访问剪贴板中的数据，而 Opera 不允许这种访
问方式。
5 即使是 IE、Chrome 和 Safari，它们各自的实现方式也不相同。
6 Firefox、Safari 和 Chrome 只允许在 paste 事件发生时读取剪贴板数据，而 IE 没有这个限制。
7 Firefox、Safari 和 Chrome 只允许在发生剪贴板事件时访问与剪贴板相关的信息，而 IE 允许在任
何时候访问相关信息。
在文本框内容必须限制为某些特定字符的情况下，就可以利用剪贴板事件来屏蔽通过粘贴向文本框
中插入内容的操作。
8选择框也是经常要通过 JavaScript 来控制的一个表单字段。由于有了 DOM，对选择框的操作比以前
要方便多了。添加选项、移除选项、将选项从一个选择框移动到另一个选择框，甚至对选项进行排序等
操作，都可以使用标准的 DOM 技术来实现。
富文本编辑功能是通过一个包含空 HTML 文档的 iframe 元素来实现的。通过将空文档的
designMode 属性设置为"on"，就可以将该页面转换为可编辑状态，此时其表现如同字处理软件。另外，
也可以将某个元素设置为 contenteditable。在默认情况下，可以将字体加粗或者将文本转换为斜体，
还可以使用剪贴板。JavaScript 通过使用 execCommand()方法也可以实现相同的一些功能。另外，使用
queryCommandEnabled()、queryCommandState()和 queryCommandValue()方法则可以取得有关
文本选区的信息。由于以这种方式构建的富文本编辑器并不是一个表单字段，因此在将其内容提交给
服务器之前，必须将 iframe 或 contenteditable 元素中的 HTML 复制到一个表单字段中。
